<template>
<section>
<div class="right-page clearfix">
    <div class="index-top">
        <div class="pane clearfix">
           <div class="col-lg">
            <div class="widget-content col-md1">
              <p class="pri-txt"><span>￥</span>5000</p>
              <p class="desc">今日收入金额（元）</p>
            </div>
            </div>
            <div class="col-lg">
            <div class="widget-content col-md2">
              <p class="pri-txt"><span>￥</span>8000</p>
              <p class="desc">今日支出金额（元）</p>
            </div>
            </div>
            <div class="col-lg">
            <div class="widget-content col-md3">
              <p class="pri-txt"><span></span>25</p>
              <p class="desc">今日报名(人)</p>
            </div>
            </div>
            <div class="col-lg">
            <div class="widget-content col-md4">
                <p class="pri-txt"><span></span>168</p>
                <p class="desc">今日收入学员(人)</p>
             </div>
             </div>
              <div class="col-lg">
               <div class="widget-content col-md5 clearfix">
                 <div class="subjet">
                      <p class="pri-txt"><span></span>15</p>
                      <p class="desc">科二约车</p>
                  </div>
                  <div class="subjet">
                      <p class="pri-txt"><span></span>20</p>
                      <p class="desc">科三约车</p>
                  </div>
                  </div>
                </div>
        </div>
      </div>
    <div style="height:100px"></div>
    <!-- <div id="chart" style="height:500px;width:100%"></div> -->
</div>
</section>
</template>
<script>
import echarts from 'echarts'

export default {
    data() {
      return {
        series:[
            {
                name:'蒸发量',
                type:'bar',
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
            },
            {
                name:'降水量',
                type:'bar',
                yAxisIndex: 1,
                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
            },
            {
                name:'平均温度',
                type:'line',
                yAxisIndex: 2,
                data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
      }
    },
    methods:{
      init(){
        this.myChart = echarts.init(document.getElementById('chart'));
        var colors=['#5793f3', '#d14a61', '#675bba'];
        var option={
          color:colors,
          tooltip: {
              trigger: 'axis',
              axisPointer: {type: 'cross'}
          },
          grid: {right: '20%'},
          legend: {
              data:['蒸发量','降水量','平均温度']
          },
          xAxis: [
              {
                  type: 'category',
                  axisTick: {
                      alignWithLabel: true
                  },
                  data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  name: '蒸发量',
                  min: 0,
                  max: 250,
                  position: 'right',
                  axisLine: {
                      lineStyle: {
                          color: colors[0]
                      }
                  },
                  axisLabel: {
                      formatter: '{value} ml'
                  }
              },
              {
                  type: 'value',
                  name: '降水量',
                  min: 0,
                  max: 250,
                  position: 'right',
                  offset: 80,
                  axisLine: {
                      lineStyle: {
                          color: colors[1]
                      }
                  },
                  axisLabel: {
                      formatter: '{value} ml'
                  }
              },
              {
                  type: 'value',
                  name: '温度',
                  min: 0,
                  max: 25,
                  position: 'left',
                  axisLine: {
                      lineStyle: {
                          color: colors[2]
                      }
                  },
                  axisLabel: {
                      formatter: '{value} °C'
                  }
              }
          ],
          series:this.series
        }
        this.myChart.setOption(option);
      }
    },
    mounted(){
      this.init();
      window.onresize =()=>{
        this.myChart.resize();
      }
    }
}

</script>
<style scoped>
.right-page{width:100%;}
.tab-top{background:#fff;}
.tab-top li,.pan4-title li{float:left;padding:18px 12px;margin:0 30px;transition: all 0.5s;}
.tab-top li a,.pan4-title li a{font-size:16px;color:#333333}
.tab-top li a:hover,.pan4-title li a:hover{text-decoration:none!important}
.tab-top .onclick,.pan4-title .onclick{border-bottom: 4px solid #31c8a4}
.tab-top .onclick a,.pan4-title .onclick a{color:#31c8a4}
.index-top,.index-left .pane1,.index-left .pane2,.index-left .pane3,.index-left .pane4,.index-right{margin-top:15px}
.col-lg{padding-right: 15px;float:left;width:20%;box-sizing: border-box}
.col-lg:last-child,.index-left .pane1 .con2:last-child{padding-right: 0}
.widget-content{background:#fff;text-align:center;padding:35px 0}
.widget-content:last-child{margin-right: 0}
.col-md1{border:1px solid #31c8a4}
.col-md2{border:1px solid #ffa200}
.col-md3{border:1px solid #ed4e42}
.col-md4{border:1px solid #4286ed}
.col-md5{border:1px solid #f146c3}
.widget-content .pri-txt{color:#000;font-size:28px;padding-bottom: 10px}
.widget-content .pri-txt span{color:#000;font-size:20px}
.widget-content .desc{color:#999999;font-size:14px}
.widget-content p{line-height: 24px}
.widget-content .subjet{float:left;text-align: center;width:50%}
</style>
